一、使用模板

https://github.com/technext/Metronic-Shop-UI

二、前台頁面

1. 首頁
2. 列表頁
3. 搜尋結果頁
4. 一般文章內頁
5. 商品內頁
6. 會員專區
7. 購物車頁面
8. 結帳頁面

• 建立前台樣式資源資料夾 resources/front/assets
• 設定 webpack.mix.js

    mix.copyDirectory('resources/front/assets', 'public/front/assets').version();

• 執行打包命令

    npm run dev

三、 前台主模板( master )

1. 建立 master.blade.php 內容包含前台所需的 css, js 樣式, 提供 blade content 給其他模板調用
2. Vue Components 分割
   • resources/js/components/main 放全網站會用到的 component
     • footerComponent.vue: 網站頁尾內容
     • menuComponent.vue: 網站選單內容
3. 在 app.js 中引入兩個 component

    Vue.component('menu-component', 
                    require('./components/main/menuComponent.vue')
                    .default
                 );
    Vue.component('footer-component', 
                    require('./components/main/footerComponent.vue')
                    .default
                  );

4. master.blade.php 內使用 vue component

    <div id="app">  
        <!-- menu -->
        <menu-component></menu-component>    

        <div class="main">
            <!-- 引入 index.blade.php 內容 -->
            @yield('content')
        </div> 

        <!-- footer -->
        <footer-component></footer-component>
    </div>

四、首頁內容

1. 建立 resources/js/components/pages 放置各頁面 component
2. index 相關 Vue Components 分割, 檔案位置 resources/js/components/index
   • setpsComponents.vue: 購買流程介紹
   • sliderComponent.vue: 首頁 banner
   • contentComponent.vue: 首頁內容
3. 建立 resources/js/components/pages/indexComponent.vue 放置首頁內容

       <template>
            <div>
                <SliderComponent></SliderComponent>
                <ContentComponent></ContentComponent>
                <SetpsComponent></SetpsComponent>
            </div>    
        </template>
   
        <script>
        import SliderComponent from '../index/sliderComponent.vue'
        import SetpsComponent from '../index/setpsComponent.vue'
        import ContentComponent from '../index/contentComponent.vue'
        export default {
            mounted() {
                console.log("index component mounted")
            },
            components:{
                SliderComponent,
                SetpsComponent,
                ContentComponent
            }
        }
        </script>
   

4. 建立 index.blade.php 模板繼承 master.blade.php, 當作網在前台入口

    @extends('front.layout.master')

    @section('content')
      <router-view></router-view>
    @endsection

5. 設定 vue 路由( resource/js/src/router/index.js )

    import Vue from 'vue'
    // 引入 router 插件
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    // 引入路由需要的 Components
    import indexComponent from '../../components/pages/indexComponent'

    export default new VueRouter({
        routes:[
            {
                path: '/',
                component: indexComponent
            }
        ]
    })

• 網站頁面
  

• Vue.js devtools 查看
  

github 進版
剩下的明天繼續